<template>
	<view class="course-dir">
		<view v-for="(chapter,index) in  chapterList " :key="index">
			<!-- 第几章 -->
			<text class="chapters text-ellipsis">第{{index+1}}章 </text>
			<!-- 第几节 -->
			<!-- playVideo点击试看 -->
			<view class="sections row"
				:class="{active:index===activeObj.chapterIndex  && index2 ===activeObj.sectionIndex}"
				@click="playVideo(index,index2,section)" v-for="(section,index2)  in chapter.sectionList" :key="index2">
				<text class="iconfont icon-roundcheckfill "></text>
				<view class="row">
					<text>{{index+1}} - {{index2+1}}</text>
					<text class="title text-ellipsis">{{section.name}}</text>
				</view>
				<text class="see" v-if="section.isFree && !isBuy "> 试看</text>
			</view>
		</view>



	</view>

</template>

<script>
	export default {
		props: {
			isBuy: Boolean, //是否购买
			chapterList: {
				type: Array,
				default: () => [{
					id: 1,
					name: '项目内容介绍',
					sectionList: [ //课节信息
						{
							id: 1,
							name: '什么是uniapp框架',
							isFree: 1 //是否付费   0付费  1免费
						},
						{
							id: 2,
							name: '安装开发',
							isFree: 1 //是否付费   0付费  1免费
						},
						{
							id: 3,
							name: '开发第一个工具',
							isFree: 0 //是否付费   0付费  1免费
						}
					]
				}],
			},

			activeObj: { //动态给点击章节高亮
				type: Object,
				default: () => ({
					chapterIndex: -1, //章的下标
					sectionIndex: -1 //节的下标
				})
			}
		},
		methods: {
			// 点击试看
			// 第几章的chapterIndex 
			// 第几节的sectionIndex
			// section  点击那个的对象
			playVideo(chapterIndex, sectionIndex, section) {
				//已购买  则直接跳转到视频播放列表页面
				if (section.isFree || this.isBuy) {
					this.activeObj.chapterIndex = chapterIndex 	//章的下标
					this.activeObj.sectionIndex = sectionIndex  //节的下标
					this.$emit('playVideo', {
						section: section,
						activeObj:this.activeObj
					})
				} else {
					this.$util.msg('请先购买')
				}
			}
		}
	}
</script>

<style lang="scss">
	.course-dir {
		padding: 0 36rpx;

		.chapters {
			margin-top: 30rpx;
			margin-bottom: 10rpx;
			color: $xg-text-color-black;
			font-weight: bold;
		}

		.sections {
			padding: 20rpx 0;
			font-size: 30rpx;
			border-bottom: $xg-underline;
			line-height: 40rpx;
			color: #3d3c40;

			text {
				margin-right: 10rpx;
			}

			.title {
				width: 470rpx;
			}

			.see {
				color: $xg-text-color-blue;
				font-size: 25rpx;
				//靠右
				flex: 1;
				text-align: right;
			}
		}

		.active {
			color: #86b5ff;
		}
	}
</style>
